
<div class="page">

    <section class="panel panel-default">
        <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Basic Form</strong></div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">

                    <form role="form">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Check me out
                            </label>
                        </div>
                        <button type="submit" class="btn btn-primary btn-w-md">Submit</button>
                    </form>

                </div>
            </div>
        </div>
    </section>

    <section class="panel panel-default">
        <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Horizontal Form</strong></div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">

                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox"> Remember me
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-success btn-w-md">Sign in</button>
                            </div>
                        </div>
                    </form>  

                </div>
            </div>
        </div>
    </section>


    <section class="panel panel-default">
        <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Inline Form</strong></div>
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-6 col-lg-offset-3">

                    <form class="form-inline" role="form">
                        <div class="form-group">
                            <label class="sr-only" for="exampleInputEmail2">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="exampleInputPassword2">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Remember me
                            </label>
                        </div>
                        <button type="submit" class="btn btn-info btn-w-md">Sign in</button>
                    </form>   

                </div>
            </div>
        </div>
    </section>


    <section class="panel panel-default">
        <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Column sizing</strong></div>
        <div class="panel-body">
            <div class="form-group">
                <div class="row">
                    <div class="col-sm-1">
                        <input type="text" class="form-control col-sm-1" placeholder="col-sm-1"> 
                    </div>
                    <div class="col-sm-11">
                        <input type="text" class="form-control col-sm-11" placeholder="col-sm-11"> 
                    </div>                     
                </div>

                <div class="divider"></div>

                <div class="row">
                    <div class="col-sm-2">
                        <input type="text" class="form-control col-sm-2" placeholder="col-sm-2"> 
                    </div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control col-sm-10" placeholder="col-sm-10"> 
                    </div>                     
                </div>

                <div class="divider"></div>

                <div class="row">
                    <div class="col-sm-3">
                        <input type="text" class="form-control col-sm-3" placeholder="col-sm-3"> 
                    </div>
                    <div class="col-sm-9">
                        <input type="text" class="form-control col-sm-9" placeholder="col-sm-9"> 
                    </div>                     
                </div>

                <div class="divider"></div>

                <div class="row">
                    <div class="col-sm-4">
                        <input type="text" class="form-control col-sm-4" placeholder="col-sm-4"> 
                    </div>
                    <div class="col-sm-8">
                        <input type="text" class="form-control col-sm-8" placeholder="col-sm-8"> 
                    </div>                     
                </div>

                <div class="divider"></div>

                <div class="row">
                    <div class="col-sm-5">
                        <input type="text" class="form-control col-sm-5" placeholder="col-sm-5"> 
                    </div>
                    <div class="col-sm-7">
                        <input type="text" class="form-control col-sm-7" placeholder="col-sm-7"> 
                    </div>                     
                </div>

                <div class="divider"></div>

                <div class="row">
                    <div class="col-sm-6">
                        <input type="text" class="form-control col-sm-6" placeholder="col-sm-6"> 
                    </div>
                    <div class="col-sm-6">
                        <input type="text" class="form-control col-sm-6" placeholder="col-sm-6"> 
                    </div>                     
                </div>

                <div class="divider"></div>

                <div class="row">
                    <div class="col-sm-7">
                        <input type="text" class="form-control col-sm-7" placeholder="col-sm-7"> 
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class="form-control col-sm-5" placeholder="col-sm-5"> 
                    </div>                     
                </div>

                <div class="divider"></div>

                <div class="row">
                    <div class="col-sm-8">
                        <input type="text" class="form-control col-sm-8" placeholder="col-sm-8"> 
                    </div>
                    <div class="col-sm-4">
                        <input type="text" class="form-control col-sm-4" placeholder="col-sm-4"> 
                    </div>                     
                </div>

                <div class="divider"></div>

                <div class="row">
                    <div class="col-sm-9">
                        <input type="text" class="form-control col-sm-9" placeholder="col-sm-9"> 
                    </div>
                    <div class="col-sm-3">
                        <input type="text" class="form-control col-sm-3" placeholder="col-sm-3"> 
                    </div>                     
                </div>

                <div class="divider"></div>

                <div class="row">
                    <div class="col-sm-10">
                        <input type="text" class="form-control col-sm-10" placeholder="col-sm-10"> 
                    </div>
                    <div class="col-sm-2">
                        <input type="text" class="form-control col-sm-2" placeholder="col-sm-2"> 
                    </div>                     
                </div>

                <div class="divider"></div>

                <div class="row">
                    <div class="col-sm-11">
                        <input type="text" class="form-control col-sm-11" placeholder="col-sm-11"> 
                    </div>
                    <div class="col-sm-1">
                        <input type="text" class="form-control col-sm-1" placeholder="col-sm-1"> 
                    </div>                     
                </div>

                <div class="divider"></div>

            </div>            
        </div>
    </section>

</div>